<template>
	<view class="" style="padding-bottom: 20rpx;">
		<u-navbar title="华旨尚品" :border-bottom="false" :immersive="true" :is-back="false"  :background="back" bgColor='rgba(0,0,0,0)'>  </u-navbar>
		<block v-for="(item,index) in homeList" :key="index">
			<!-- 轮播图 -->
			<view v-if="item.group == 1" >
				<u-swiper
				name="img"
					border-radius='0' 
					height="471" 
					:interval="4000" 
					indicator 
					indicatorMode="line" 
					circular 
					:list="item.list" 
					@click="onSwiper">
				</u-swiper>
			</view>
			<!-- 通知公告 -->
			<view   v-if="item.group == 2" class="" style="position: relative;">
				<image class="ggimg" src="https://s1.ax1x.com/2022/05/12/O096nx.png" mode=""></image>
				<swiper class="swiper" :autoplay="true" circular :vertical="true" style="height: 73rpx;">
					
					<swiper-item  v-for="(items,indexs) in item.list" :key="indexs">
						<view class="swiper-item tzgg">
							<view class="" @click="tzxq(items)">
								<text>{{items.title}}</text>
							</view>
							
							<view class="" @click="tzxq(items)">
								查看详情 >
							</view>
						</view>
					</swiper-item>
				</swiper>
				
			</view>
			<!-- 商品分类 -->
			<view class="indexspfl" v-if="item.group == 3">
				<view class="" v-for="(menu,menuindex) in item.list" :key="menuindex" @click="fenleiTo(menu.value_param.id)">
					<view class="idfl">
						<image :src="IMG_URL+menu.img" mode=""></image>
					</view>
					<view class="">
						{{menu.name}}
					</view>
				</view>
			</view>
			<!-- 产品广告 -->
			
			<!-- 最新产品list -->
			<view class="" v-if="item.group == 4">
				<view class="contents">
					<!-- 最新产品 -->
					<view class="indexzxcvp" @click="zxcp(item.list[0].value_param.id,item.list[0].type,item.list[0])">
						<image :src="IMG_URL+item.list[0].img" mode=""></image>
					</view>
					<view class="zxcplist">
						<!-- 前三个产品 -->
						
						<view class="indexq3">
							<!-- 第一个高产品 -->
							<view class=""  @click="zxcp(item.list[1].value_param.id,item.list[1].type,item.list[1])">
								<image style="width: 350rpx;height: 490rpx;" :src="IMG_URL+item.list[1].img" mode=""></image>
							</view>
							<!-- 右侧两个矮产品 -->
							<view class="indexqview indexq1right" @click="zxcp(item.list[2].value_param.id,item.list[2].type,item.list[2])">
								<view class="indexq2 ">
									<image style="width: 350rpx;height: 230rpx;" :src="IMG_URL+item.list[2].img" mode=""></image>
								</view>
								<view class="indexq2" @click="zxcp(item.list[3].value_param.id,item.list[3].type,item.list[3])">
									<image style="width: 350rpx;height: 230rpx;" :src="IMG_URL+item.list[3].img" mode=""></image>
								</view>
							</view>
						</view>
						
						<!-- 下面两个产品 -->
						<view class="_h2" >
							<view class="indexq2" style="width: 350rpx;" @click="zxcp(item.list[4].value_param.id,item.list[4].type,item.list[4])"> 
								<image style="width: 350rpx;height: 230rpx;" :src="IMG_URL+item.list[4].img" mode=""></image>
							</view>
							<view class="indexq2" style="width: 350rpx;" @click="zxcp(item.list[5].value_param.id,item.list[5].type,item.list[5])">
								<image style="width: 350rpx;height: 230rpx;" :src="IMG_URL+item.list[5].img" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 线上充值 -->
			<view class="contents" v-if="item.group == 6">
				<view class="indexsscx" style="margin: 0;" @click="goChongZhi" >
					<image :src="IMG_URL+item.list[0].img" mode=""></image>
				</view>
			</view>
			<view class="contents" v-if="item.group == 7">
				
				<!-- 线上充值 -->
			
				<!-- 每日精选    •特价好酒 -->
				<view class="indexmrjxtitle" style="margin: 0 -20rpx;margin-bottom: 0;">
					<!-- <text>每日精选</text> • <text>特价好酒</text>  -->
					<image style="width: 100%;" :src="homeTemplate[6].content.image" mode="widthFix"></image>
				</view>
				<!-- 每日推荐列表 -->
					<jingxuan :detail="item.list"></jingxuan>
				</view>
			<!-- 首页酒的系列 -->
			<block v-if="item.group == 8">
				<view class="indexmrjxtitle" style="margin-bottom: 0;margin-top: 10rpx;">
					<!-- <text>每日精选</text> • <text>特价好酒</text>  -->
					<image style="width: 100%;" :src="homeTemplate[8].content.image" mode="widthFix"></image>
				</view>
				<view class="indexjxl" style="margin-top: 0;">
					<view class="indexjxlitem" v-for="(items,indexx) in item.list" :key="indexx" @click="jingxuanTo(items.value_param.id)">
						<text>{{items.name}}</text>
						<view class="">
							{{items.subtitle}}
						</view>
						<image :src="IMG_URL+items.img" mode="widthFix"></image>
					</view>
				</view>
			</block>
			
			<!-- 首页邀请好友赢好礼 -->
			<view class="yhyyhl" @click="showShare = true" v-if="item.group == 9">
				
				<image :src="IMG_URL+item.list[0].img" mode=""></image>
			</view>
		</block>
			
	
		
			
			
			<!-- 	分享组件 -->
			<shopro-share v-model="showShare"  posterType="user"></shopro-share>
		</view>

	</view>

	</view>
</template>

<script>
	import jingxuan from '@/components/jingxuan/jingxuan.vue';
	import shBanner from './components/sh-banner.vue';
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	export default {
		components: {
			jingxuan,
			shBanner
		},
		data() {
			return {
				actives:0,
				back:{background:'rgba(0,0,0,0)'},
				showShare:false,
				goodsList:[],
				IMG_URL:this.$IMG_URL,
				lists: [
					{
						image:'https://s1.ax1x.com/2022/03/30/q2SvAP.png',
						urls:""
					},
					{
						image:'https://s1.ax1x.com/2022/03/30/q2SvAP.png',
						urls:""
					},
					{
						image:'https://s1.ax1x.com/2022/03/30/q2SvAP.png',
						urls:""
					}
					
				], //首页产品轮播
				cpfl:[
					{name:"杏花村",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg"},
					{name:"湄窖系列",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg"},
					{name:"汾酒系列",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg"},
					{name:"畅销名酒",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg"},
					{name:"营养滋补",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg"},
					{name:"精选茗茶",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg"},
					{name:"高端红酒",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg"},
					{name:"会员权益",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg"}
				],//首页产品分类
				mrtj:[
					{name:"杏花村酒·X9",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg",
					jia:"¥676",yuanjia:"¥676"
					},
					{name:"杏花村酒·X9",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg",
					jia:"¥676",yuanjia:"¥676"
					},
					{name:"杏花村酒·X9",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg",
					jia:"¥676",yuanjia:"¥676"
					},
					{name:"杏花村酒·X9",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg",
					jia:"¥676",yuanjia:"¥676"
					},
					{name:"杏花村酒·X9",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg",
					jia:"¥676",yuanjia:"¥676"
					},
					{name:"杏花村酒·X9",img:"https://s4.ax1x.com/2022/01/30/H9dfMD.jpg",
					jia:"¥676",yuanjia:"¥676"
					}
				],//每日推荐好酒
				jxl:[
					{
						title:"汾酒系列",
						content:"清香典范/大国之酿",
						img:"https://s1.ax1x.com/2022/03/30/q29pUx.png",
						url:2
					},
					{
						title:"畅销名酒",
						content:"清香典范/大国之酿",
						img:"https://s1.ax1x.com/2022/03/30/q2pxbR.png",
						url:3
					},
					{
						title:"湄窖系列",
						content:"清香典范/大国之酿",
						img:"https://s1.ax1x.com/2022/03/30/q29SV1.png",
						url:1
					},
					{
						title:"高端红酒",
						content:"精品礼盒包装送礼佳品",
						img:"https://s1.ax1x.com/2022/03/30/q2pjKJ.png",
						url:6
					},
					
					
				],//首页酒系列
				sxlx:[
					{
						id:7,
						title:"精选",
						ms:"为你推荐"
					},
					{
						id:2,
						title:"白酒",
						ms:"大国之酿"
					},
					{
						id:10,
						title:"红酒",
						ms:"原装进口"
					},
					{
						id:9,
						title:"茗茶",
						ms:"品质保证"
					},
					{
						id:8,
						title:"滋补",
						ms:"营养健康"
					}
				],
				cplist:[
					{
						name:"杏花村酒·X9  500ml",
						ms:"清香型白酒",
						jia:"767"
					},
					{
						name:"杏花村酒·X9  500ml",
						ms:"清香型白酒",
						jia:"767"
					},
					{
						name:"杏花村酒·X9  500ml",
						ms:"清香型白酒",
						jia:"767"
					},
					{
						name:"杏花村酒·X9  500ml",
						ms:"清香型白酒",
						jia:"767"
					},
					{
						name:"杏花村酒·X9  500ml",
						ms:"清香型白酒",
						jia:"767"
					},
					{
						name:"杏花村酒·X9  500ml",
						ms:"清香型白酒",
						jia:"767"
					}
				],//产品列表
				tabCur: 0,
				scrollLeft: 0,
				isEmpty: true,
				categoryId: 0,
				goodsList: [],
				tabCurrent: 0,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				homeList:[]
			}
		},
		computed: {
			...mapGetters(['initShop', 'homeTemplate', 'hasTemplate', 'isLogin']),
			// 头部模块数据
			headSwiperList() {
				if (this.homeTemplate?.length) {
					return this.homeTemplate[0]?.content?.list;
				}
			},
			// 分类选项卡数据
			categoryTabsData() {
				if (this.homeTemplate?.length) {
					return this.homeTemplate[this.homeTemplate.length - 1]?.content;
				}
			}
		},
		onLoad() {
			// this.categoryId = 7
			// this.getGoodsList()
			this.getHome()
		},
		onShow() {
			// this.getCartList()
		},
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			// this.scrollTop = e.scrollTop;
			// console.log(e.scrollTop)
			if(e.scrollTop < 80){
				this.back = { background:'rgba(255,255,255,0)'}
			}else{
				this.back = { background:'rgba(255,255,255,1)'}
			}
		},
		methods: {
			...mapActions(['appInit', 'getTemplate', 'getCartList']),
			// 初始化
			init() {
				this.isRefresh = false;
				return Promise.all([this.getTemplate()]).then(() => {
					uni.stopPullDownRefresh();
					this.isRefresh = true;
				});
			},
			
			// 获取首页信息
			getHome(){
				let that = this
				that.$http('common.home').then(res => {
					if (res.code === 1) {
						console.log(res,'首页数据')
						res.data.forEach(item =>{
							if(item.group == 1){
								item.list.forEach(items =>{
									items.img = this.$IMG_URL+items.img
								})
							}
						})
						this.homeList = res.data
						
					}
				});
			},
			// 更新轮播图
			setBanner(){
				
				console.log(this.homeTemplate)
			},
			//跳转通知详情
			tzxq(item){
				console.log('详情',item)
				uni.navigateTo({
					url:item.link
				})
				uni.setStorageSync('contents',item.contents)
			},
			// 点击轮播图
			click(url) {
				let _this=this
				uni.navigateTo({
					// url:_this.list1[url].urls,
					url:"../product/product-xq?id="+10
				})
			},
			onSwiper(index){
				console.log(index)
				console.log(this.homeList[0].list[index].id)
				if(this.homeList[0].list[index].link != null && this.homeList[0].list[index].link != ''){
					
					this.$Router.push({
						path: this.homeList[0].list[index].link
					});
				}else if(this.homeList[0].list[index].type == 'category'){
					uni.$emit('typeId', {id:this.homeList[0].list[index].value_param.id});
					uni.setStorageSync('typeId',this.homeList[0].list[index].value_param.id)
					uni.switchTab({
						url:'/pages/index/classification'
					})
				}else{
					if(this.homeList[0].list[index].value_param.id){
						this.$Router.push({
							path: '/pages/product/product-xq',
							query: { id:this.homeList[0].list[index].value_param.id }
						});
					}
				}
			},
			zxcp(id,type,item){
				if(item.link != null && item.link != ''){
					console.log(item.link)
					this.$Router.push({
						path: item.link
					});
				}else if(type == 'category'){
					uni.$emit('typeId', {id:id});
					uni.setStorageSync('typeId',id)
					uni.switchTab({
						url:'/pages/index/classification'
					})
				}else if(type == 'goods'){
					if(id){
						this.$Router.push({
							path: '/pages/product/product-xq',
							query: { id:id }
						});
					}
				}
			},
			goChongZhi(){
				uni.navigateTo({
					url:'/pages/user/wallet'
				})
			},
			jingxuanTo(url){
				uni.$emit('typeId', {id:url});
				uni.setStorageSync('typeId',url)
				uni.switchTab({
					url:'/pages/index/classification'
				})
			},
			fenleiTo(index){
				console.log(index)
				uni.$emit('typeId', {id:index});
				uni.setStorageSync('typeId',index)
				uni.switchTab({
					url:'/pages/index/classification'
				})
				
			},
			// 首页商品列表切换
			active(index,id){
				let _this=this
				_this.actives=index
				this.tabChange(id)
			},
			getGoodsList() {
				let that = this;
				that.$http('goods.lists', {
					category_id: that.categoryId,
					page: that.currentPage
				}).then(res => {
					this.setBanner()
					if (res.code === 1) {
						that.goodsList = [...that.goodsList, ...res.data.data];
						that.tempList = res.data.data;
						that.isEmpty = !that.goodsList.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					}
				});
			},
			
			// tabs
			tabChange(id) {
				this.categoryId = id;
				this.goodsList = [];
				this.currentPage = 1;
				this.lastPage = 1;
				this.loadStatus = 'loadmore';
				this.getGoodsList();
			}
		}
	}
</script>

<style scoped>
	.tzgg{
		padding: 23rpx 20rpx 20rpx 74rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.tzgg image{
		width: 32rpx;
		height: 27rpx;
		margin-right: 12rpx;
	}
	.tzgg>view{
		font-size: 20rpx;
		font-weight: 400;
		color: #999999;
		display: flex;
		align-items: center;
	}
	.tzgg text{
		font-size: 24rpx;
		font-weight: 500;
		color: #7C7C7C;
	}
	.ggimg{
		width: 32rpx;
		height: 27rpx;
		position: absolute;
		left: 30rpx;
		top: 24rpx;
	}
	.indexspfl{
		display: flex;
		flex-wrap: wrap;
		/* padding-top: 34rpx; */
	}
	.indexspfl>view{
		width: 25%;
		text-align: center;
		
	}
	.indexspfl>view>view{
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
	}
	.idfl>image{
		width: 120rpx ;
		height: 120rpx;
	}
	.idfl{
		margin: 30rpx auto 9rpx;
		width: 120rpx;
		height: 120rpx;
		background: #F6F6F6;
		border-radius: 10rpx;
	}
	.indexzxcvp{
		height: 100%;
		height:328rpx;
		max-height: 328rpx;
		margin: 59rpx 0 40rpx;
	}
	.indexzxcvp>image{
		width: 100%;
		max-height: 100%;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
	}
	.indexsscx{
		height: 100%;
		height:200rpx;
		max-height: 200rpx;
		margin: 39rpx 0 29rpx;
	}
	.indexsscx>image{
		width: 100%;
		max-height: 100%;	
		border-radius: 10rpx;
	}
	.indexmrjxtitle>text:first-of-type{
		font-size: 36prx;
		font-weight: 550;
		color: #333333;
		margin-right: 30rpx;
	}
	.indexmrjxtitle>text:last-of-type{
		font-size: 30prx;
		color: #333333;
		font-weight: 400;
		margin-left: 30rpx;
	}
	.indexmrjxtitle{
		margin-bottom: 40rpx;
	}
	.indexmrjx{
		background: #FFFFFF;
		border-radius: 10rpx;
		padding:40rpx 50rpx;
		/* width: calc(100% - 100rpx); */
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.indexmritem{
		text-align: center;
		margin-bottom: 50rpx;
		width: 28%;
	}

	.indexmritem>image{
		/* width: 144rpx; */
		height: 153rpx;
	}
	.mrtjflex{
		display: flex;
		justify-content: center !important;
	}
	.indexmritem>view:first-of-type{
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;
		margin: 20rpx 0 18rpx;
	}
	.mrtjflex>text:first-of-type{
		font-size: 20rpx;
		font-weight: 400;
		color: #7C7C7C;
		text-decoration: line-through;
	}
	.mrtjflex>text:last-of-type{
		font-size: 24rpx;
		font-weight: bold;
		color: #FF9A33;
	}
	.indexjxl{
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 20rpx;
		margin-top: 34rpx;
		margin-bottom: 40rpx;
		padding: 30rpx 20rpx 40rpx;
		/* width: calc(100% - 40rpx); */
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.indexjxl>view{
		margin-bottom: 39rpx;
	}
	.indexjxl>view:nth-of-type(3),.indexjxl>view:nth-of-type(4){
		margin-bottom: 0;
	}
	.indexjxlitem image{
		width: 330rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}
	.indexjxlitem>text{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}
	.indexjxlitem>view{
		font-size: 20rpx;
		font-weight: 500;
		color: #7C7C7C;
		margin: 7rpx 0 16rpx;
	}
	.yhyyhl{
		/* width: 100%; */
		height: 130rpx;		border-radius: 30rpx;
		margin-bottom: 56rpx;
		overflow: hidden;
		margin: 0 20rpx;
	}
	.yhyyhl>image{
		width: 100%;
		height: 100%;;
	}
	.indexsx{
		padding: 0 20rpx;
		/* width: calc(100% -40rpx); */
		display: flex;
		justify-content: space-between;
	}
	.indexsxitem>text{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 12rpx;
		display: block;
		text-align: center;
	}
	.indexsxitem>view{
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #7C7C7C;
		width: 108rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
	}
	.indexcpactiv>view{
		width: 108rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
		background: #FF9A33;
		border-radius: 15rpx;
		color: #FFFFFF;
	}
	.cplist{
		margin-top: 50rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.cpitem{
		text-align: center;
		background: #FFFFFF;
		border-radius: 10rpx;
		position: relative;
		margin-bottom: 35rpx;
		padding: 45rpx 20rpx 40rpx;
		width: 48%;
	}
	.cpitem>view{
		text-align: left;
	}
	.jia{
		position: absolute;
		right: 0;
		bottom: 0;
		width: 70rpx;
		text-align: center !important;
		line-height: 44rpx;
		color: #FF9A33;
		height: 44rpx;
		border: 1rpx solid #FF9A33;
		border-radius: 30rpx 0rpx 10rpx 0rpx;
	}
	.cpitem>image{
		width: 182rpx;
		height: 231rpx;
	}
	.cptitle{
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin: 77rpx 0 29rpx;
	}
	.cpms{
		font-size: 24rpx;
		font-weight: 500;
		color: #7C7C7C;
		margin: 29rpx 0 40rpx;
	}
	.cpjg{
		font-size: 24rpx;
		font-weight: 800;
		color: #FF9A33;
	}
	.indexq3{
		display: flex;
		justify-content: space-between;
				margin-bottom: 30rpx;
	}
	.indexqview{
		width: 350rpx;;
	}
	.indexq1{
		/* width: calc(330rpx - 50rpx); */
		/* padding: 20rpx 25rpx 0 25rpx; */
		background: #EBF4FD;
		position: relative;
		border-radius: 10rpx;
	}
	.indexq1 image{
		/* width: 281rpx;
		height: 330rpx;
		position: absolute;
		bottom: 0; */
	}
	._h2{
		display: flex;
		justify-content: space-between;
	}
	.indexq2{
		/* padding: 112rpx 20rpx 20rpx 0; */
		/* width: calc(330rpx - 20rpx); */
		text-align: right;
		position: relative;
		/* background: #FFFFFF; */
		border-radius: 10rpx;
		margin-bottom: 18rpx;
	}
	.indexq2>image{
		/* position: absolute;
		top: 10rpx;
		left: 10rpx;
		width: 113rpx;
		height: 142rpx; */
	}
	.xhc{
		font-size: 30rpx;
		font-weight: 800;
		color: #333333;
	}
	.xhc1{
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
		margin: 19rpx 0 10rpx;
	}
	.xhc2{
		width: 70rpx;
		text-align: center;
		height: 40rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #FF9A33;
		line-height: 40rpx;
		border: 1rpx solid #FF9A33;
		border-radius: 4rpx;
	}
	.xhj{
		font-size: 30rpx;
		font-weight: 800;
		color: #FF9A33;
	}
	.xhj1{
		font-size: 20rpx;
		font-weight: 400;
		color: #333333;
	}
	.xhj2{
		font-size: 26rpx;
		font-weight: 800;
		color: #333333;
		margin: 20rpx 0 13rpx;
	}
	.indexq1right>.indexq2:last-of-type{
		margin-bottom: 0;
	}
</style>
